<!--
 * @Description:
 * @Author: zheng yiliang
 * @Date: 2021-03-10 21:38:26
 * @LastEditTime: 2021-06-11 13:02:00
 * @LastEditors: zheng yiliang
-->
<template>
  <div>
    <el-form
      :rules="rules"
      style="margin-left: 20px"
      label-position="left"
      :model="changePwdForm"
      label-width="80px"
      ref="changePwdForm"
    >
      <el-form-item label="旧密码" prop="oldPwd">
        <el-input
          type="password"
          v-model="changePwdForm.oldPwd"
          style="width: 400px"
        ></el-input>
      </el-form-item>

      <el-form-item label="新密码" prop="newPwd1">
        <el-input
          type="password"
          v-model="changePwdForm.newPwd1"
          style="width: 400px"
        ></el-input>
      </el-form-item>

      <el-form-item label="重复输入" prop="newPwd2">
        <el-input
          type="password"
          v-model="changePwdForm.newPwd2"
          style="width: 400px"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('changePwdForm')"
          >保 存</el-button
        >
        <el-button @click="cancel('changePwdForm')">重 置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { changePwd } from '@/api'
import { mapGetters } from 'vuex'
import { encryptedData } from '@/utils/encrypt'

export default {
  data() {
    return {
      changePwdForm: {
        oldPwd: '',
        newPwd1: '',
        newPwd2: ''
      },
      //定义规则
      rules: {
        oldPwd: [
          { required: true, message: '请输入原来密码', trigger: 'blur' }
        ],
        newPwd1: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 5, message: '密码长度需要大于等于 5 个字符', trigger: 'blur' }
        ],
        newPwd2: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { min: 5, message: '密码长度需要大于等于 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  methods: {
    submitForm(type) {
      this.$refs[type].validate(async (valid) => {
        if (valid) {
          if (this.changePwdForm.newPwd1 != this.changePwdForm.newPwd2) {
            this.$notify.error({
              title: '警告',
              message: '两次输入密码不一致'
            })
            return false
          }
          if (this.changePwdForm.oldPwd == this.changePwdForm.newPwd2) {
            this.$notify.error({
              title: '警告',
              message: '新密码不能和旧密码一致'
            })
            return false
          }
          var params = new URLSearchParams()
          const oldPwd = await encryptedData(this.changePwdForm.oldPwd)
          const newPwd = await encryptedData(this.changePwdForm.newPwd1)

          params.append('userId', this.userId)
          params.append('oldPwd', oldPwd)
          params.append('newPwd', newPwd)
          changePwd(params).then((response) => {
            console.log(response)
            if (response._RejCode == '00000000') {
              this.$notify({
                title: '成功',
                message: response._RejMsg,
                type: 'success'
              })
              this.cancel(type)
            } else {
              this.$notify.error({
                title: '警告',
                message: response.message
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel: function (type) {
      this.$refs[type].resetFields()
    }
  }
}
</script>
